<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
    <head>
        <title>Raphael Tooltips</title>
        <script src="../raphael-min.js" type="text/javascript"></script>
        <script src="../g.raphael.js" type="text/javascript"></script>
        <script type="text/javascript">
            window.onload = function () {
                var r = Raphael("holder", 2000, 2000),
                    s = r.set(),
                    t = r.set(),
                    u = r.set(),
                    v = r.set();

                function ref(count, y) {
                    var def = ["M30,", y, "l", 50 * count, ",0"],
                        end = "," + (y - 20) + "l0,40";

                    for (var i = 1; i <= count; i++) {
                        def.push("M", 50 * i, end);
                    }

                    r.path(def.join('')).attr({ stroke: '#c00', translation: [150.5, 100.5] }).insertBefore(s[0]);
                }

                s.push(
                    r.tag(50, 150, "$9.99", 130),
                    r.tag(100, 150, "$9.99", 310),
                    r.label(150, 150, "$9.99"),
                    r.flag(200, 150, "$9.99", 60),
                    r.flag(250, 150, "$9.99", 240),
                    r.popup(300, 150, "$9.99", 'down', 20),
                    r.popup(350, 150, "$9.99", 'right'),
                    r.drop(400, 150, "$10", 60),
                    r.rect(450, 150, 15, 15).attr({fill:'90-#fff-#000'}).drop(),
                    r.blob(500, 150, "$9.99", 60),
                    r.blob(550, 150, "$9.99", 270),
                    r.circle(600, 150, 10).attr({fill:'#ff0000'}).label(),
                    r.circle(650, 150, 10).attr({fill:'#ff0000'}).popup(),
                    r.circle(700, 150, 10).attr({fill:'#ff0000'}).popup('down'),
                    r.circle(800, 150, 10).attr({fill:'#ff0000'}).tag(130, null, 750),
                    r.circle(800, 150, 10).attr({fill:'#ff0000'}).tag(),
                    r.circle(900, 150, 10).attr({fill:'#ff0000'}).blob(),
                    r.circle(800, 150, 10).attr({fill:'#ff0000'}).blob(270, 850)
                );

                for (var i = 0; i < 30; i++) {
                    //t.push(r.text(800, 350, "$9.99").attr({fill:'#ff0000'}).tag(360 / 30 * i, 50 * (i + 1)));
                    //t.push(r.circle(800, 350, 10).attr({fill:'90-#fff-#000'}).tag(360 / 30 * i, 5, 50 * (i + 1)));
                    t.push(r.rect(800, 350, 20, 20).attr({fill:'90-#ff0000-#0000ff'}).flag(360 / 30 * i, 50 * (i + 1)));
                }

                ref(t.length, 350);

                //test on sets
                u.push(
                    r.circle(100, 850, 10).attr({fill: '#00ff00'}),
                    r.circle(110, 800, 10).attr({fill: '#0000ff'})
                ).flag(130);

                var a = r.set();
                a.push(
                    r.circle(200, 850, 10).attr({fill: '#00ff00'}),
                    r.circle(210, 800, 10).attr({fill: '#0000ff'})
                ).flag(30);
                ref(s.length, 150);


                var v = r.set();

                for (var i = 0; i < 30; i++) {
                    //v.push(r.circle(0, 0, 10).attr({fill:'90-#fff-#000'}).blob(360 / 30 * i, 50 * (i + 1), 550));
                    v.push(r.rect(0, 0, 20, 20).attr({fill:'90-#fff-#000'}).blob(360 / 30 * i, 50 * (i + 1), 550));
                    //v.push(r.text(0, 0, 'Hello').attr({fill:'90-#fff-#000'}).blob(360 / 30 * i, 50 * (i + 1), 550));
                }

                ref(v.length, 550);
            };
        </script>
    </head>
    <body class="raphael">
        <div id="holder"></div>
    </body>
</html>
